<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    /*
        Proxy（翻译 代理） 这个api用于做对象的代理操作。
        代理指的是我们可以通过 Proxy 去拦截某个对象的行为（获取对象的属性，设置属性），然后进行控制（保护机制）。

        现实中：明星 经纪人（代理人）
        经纪人代理明星的行为，可以对明星的行为做出控制。例如经纪人可以给明星进行拍电影的安排。

        Proxy对象有什么实际的使用意义？（平常开发一般不使用，框架的底层是使用的）
        答： 在我们的 vue3 框架里面的双向数据绑定，底层使用的 api 就是我们Proxy对象，去拦截 Vuejs 里面的数据，然后当对数据进行操作的时候，就可以拦截（代理）到数据的操作，然后操作完成数据后，可以对之前订阅数据变化的地方进行发布，然后页面的数据就立马实现了响应。这个就是双向数据绑定的原理，一般我们也叫做 响应式开发。
        - https://baijiahao.baidu.com/s?id=1674871498430422820&wfr=spider&for=pc
        
        
    */

    const obj = {
        id: 1,
        name: 'zhangsan',
        age: 12,
        address: '广州',
        /* 1. 不想给别人显示 2. 不想给别人设置 */
        salary: 1000,
    }

    /**
        第一个参数就是 Proxy代理的对象，以后对该对象的方法，都交给Proxy去处理
        交给 Proxy 哪里处理呢？

        第二个参数就是我们的代理对象的处理函数，以后对该对象的方法， 都交给 第二个参数对象去处理。  
            这个对象里面可以定义
            get 当我们 去获取 obj 对象的属性时，会调用 get 方法
            set 当我们 去设置 obj 对象的属性时，会调用 set 方法
            has 当我们去判断 obj 对象的属性是否存在时，会调用 has 方法
            等方法

        
     */
    const proxy = new Proxy(obj, {
        get(target, key) {
            console.log('get', key);
            if (key === 'salary') {
                return '工资不给你展示';
            }
            return target[key];
        },
        set(target, key, value) {
            console.log('set', key, value);
            if (key === 'salary') {
                return false;
            }

            target[key] = value;
        },
        has(target, key) {
            console.log('has', key);
            return key in target;
        },
    });

    console.log(proxy.id);
    console.log(proxy.name);

    proxy.name = '新的名称';

    console.log(proxy.name);

    console.log(proxy.salary);
    proxy.salary = 2000;
    console.log(proxy.salary);

    // 属性 in  代理对象
    console.log('name' in proxy);





</script>

</html>